<template>
    <div class="con">
        <div class="header" v-show="show">
            <img src="../../assets/images/backtoutu1.png" alt>
            <div class="tip1">
                <p>尚未添加信用卡</p>
                <p style="font-size:10px">{{text}}</p>
            </div>

            <div class="btn">
                <button>立即还卡</button>
            </div>
        </div>
        <div class="header" v-for="(item,index) in data" :key="index">
             <template v-if="item.beSelected==1">
            <img src="../../assets/images/backtoutu1.png" alt>
            <ul>
                <li>
                   
                        <img :src="item.logoUrl" alt class="logoUrl">
                        <p class="bankName">{{item.bankName}}</p>
                        <span class="tip2">{{text}}</span>
                        <div class="cardnum">
                            <span>{{item.accountNo.substr(0,4)}}</span>
                            <span>****</span>
                            <span>****</span>
                            <span>{{item.accountNo.substr(item.accountNo.length-4)}}</span>
                        </div>
                 
                </li>
            </ul>

            <div class="btn" @click="ok(item)" style="background:#FFAE4E">
                <button>立即还卡</button>
            </div>
               </template>
        </div>

        <ul class="common" v-show="!show">
            <li v-for="(item,index) in data" :key="index" @click="choosecard(item,index)">
                <template v-if="item.beSelected!==1">
                    <img :src="item.logoUrl" class="logo">
                    {{item.bankName}}
                    （{{item.accountNo.substring(item.accountNo.length - 4)}}）
                    <span
                        v-show="item.checked"
                    >
                        <img src="../../assets/images/ok.png" alt>
                    </span>
                </template>
            </li>
        </ul>
        <div class="commontitle" @click="add()">
            <img src="../../assets/images/add.png" alt>
            添加还款信用卡
        </div>

        <div class="tip">
            <span @click="backplanlist()">
                还卡记录
                <img src="../../assets/images/more4.png" alt>
            </span>
        </div>

        <!-- 弹框  透明背景-->
        <div class="bg" v-show="showtk"></div>
        <div class="tk" v-show="showtk">
            <h3>您尚未添加储蓄卡</h3>
            <p>需要先添加储蓄卡才能添加信用卡</p>
            <div class="tkbtn">
                <div class="tkbtn1" @click="cancel()">暂不</div>
                <div class="tkbtn2" @click="addCard()">添加</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "chooseCredit",
    data() {
        return {
            show: false,
            showtk: false,
            data: {},
            timestamp: "",
            text:""
        };
    },
    methods: {
        ok(item) {
            localStorage.setItem("xycardId", item.id);
            localStorage.setItem("xylogoUrl", item.logoUrl);
            localStorage.setItem("xybankName", item.bankName);
            localStorage.setItem("xyaccountNo", item.accountNo);
            localStorage.setItem("xyphone", item.phone);
            this.$router.push({ name: "choosebackcreditnext" });
        },
        cancel() {
            this.showtk = false;
        },
        addCard() {
            this.$router.push({ name: "addsavecard", params: { type: 2 } });
        },
        add() {
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/bankCard/getBankCardListByUserId?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    cardType: 0
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        if (response.data.data.length == 0) {
                            this.showtk = true;
                        } else {
                            this.$router.push({
                                name: "addcreditcard",
                                params: { type: 3 }
                            });
                        }
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        },
        choosecard(item) {          
           localStorage.setItem("xycardId", item.id);
            localStorage.setItem("xylogoUrl", item.logoUrl);
            localStorage.setItem("xybankName", item.bankName);
            localStorage.setItem("xyaccountNo", item.accountNo);
            localStorage.setItem("xyphone", item.phone);
            this.$router.push({ name: "choosebackcreditnext" });

        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.axios({
            method: "post",
            headers: { token: localStorage.getItem("token") },
            url: `${
                this.siteUrl
            }/app/repay/getCards?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data: {
                userId: localStorage.getItem("userId")
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    if (response.data.data.length == 0) {
                        this.show = true;
                    } else {
                        this.show = false;
                        this.data = response.data.data;
                    }
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });

            // 还卡费率
                   this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/app/repay/getRepayInfo?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data:{
                userId:localStorage.getItem("userId")
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    this.text = response.data.data.text;
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}
.con .header {
    width: 100%;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.con .header .tip1 {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, 0%);
    color: #fff6eb;
    text-align: center;
    font-weight: 200;
}
.con .header img {
    width: 90%;
    margin-left: 5%;
    margin-top: 10px;
}
.btn {
    width: 140px;
    height: 48px;
    line-height: 48px;
    background: #ececec;
    text-align: center;
    border-radius: 24px;
    margin: 24px auto;
}
.btn button {
    width: 100%;
    font-size: 16px;
    color: #fff;
    background: transparent;
    font-weight: 200;
}

.con .commontitle {
    width: 90%;
    margin-left: 5%;
    height: 62px;
    line-height: 62px;
    color: #ffae4e;
    font-size: 14px;
    background: #fff;
    margin-top: 24px;
    margin-bottom: 12px;
    text-indent: 15px;
    border-radius: 6px;
}
.commontitle img {
    width: 16px;
    margin-right: 10px;
    vertical-align: -1px;
}
.common {
    width: 90%;
    margin-left: 5%;
    background: #fff;
    border-radius: 6px;
    margin-top: 24px;
}

.common li {
    position: relative;
    width: 100%;
    line-height: 60px;
    width: 94%;
    margin-left: 3%;
    font-size: 16px;
}
.common li .logo {
    width: 24px;
    vertical-align: -5px;
    margin-left: 2px;
    margin-right: 12px;
}
.common li span {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #999;
}
.common li span img {
    width: 20px;
    height: 20px;
    margin-top: 18px;
}
.tip {
    height: 50px;
    line-height: 60px;
    color: #ffae4e;
    text-align: center;
}
.tip span {
    margin: 0 auto;
    display: inline-block;
}
.tip img {
    width: 6px;
    vertical-align: 0px;
    margin-left: 2px;
}
.header ul {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}

.header ul li {
    width: 100%;
    height: 125px;
    border-radius: 6px;
    position: relative;
    color: #fff;
}
.header ul li .logoUrl {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 20px;
    top: 20px;
}
.header ul li .bankName {
    position: absolute;
    top: 35px;
    left: 85px;
    font-weight: 200;
}
.header ul li .tip2 {
    position: absolute;
    top: 37px;
    right: 25px;
    font-weight: 200;
    font-size: 10px;
}

.header ul li .cardnum {
    font-size: 22px;
    position: absolute;
    top: 76px;
    left: 67px;
}

/* 注册弹框 */
.bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /*  利用CSS透明效果*/
    position: fixed;
    /* 固定在浏览器里*/
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.tk {
    width: 80%;
    height: 130px;
    background: white;
    position: fixed;
    top: 30%;
    left: 10%;
    z-index: 99999;
    overflow: hidden;
    border-radius: 7px;
}
.tk h3 {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 200;
}
.tk p {
    color: #a6a9b5;
    text-align: center;
    font-size: 12px;
    margin-top: 12px;
    font-weight: 200;
}
.tk .tkbtn {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border-top: 1px solid #f2f2f2;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    font-weight: 200;
}
.tk .tkbtn1 {
    float: left;
    width: 50%;
    color: #a6a9b5;
}
.tk .tkbtn2 {
    float: left;
    width: 50%;
    color: #ffae4e;
}
</style>
